<template>
    <a-card :bordered="false">
        <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus"
                :disabled="dingdan.auditFlag !== '0'">新增人员</a-button>
        </div>
        <div class="yudingdan-table">
            <!-- :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
            <a-table ref="table" size="middle" bordered rowKey="id" class="j-table-force-nowrap" :scroll="{ x: true }"
                :columns="columns" :dataSource="dataSource" :pagination="false" :loading="loading"
                @change="handleTableChange">
                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <span slot="action" slot-scope="text, record">
                    <a @click="handleEdit(record)" :disabled="dingdan.auditFlag !== '0'">编辑</a>
                    <a-divider type="vertical" />
                    <a-dropdown>
                        <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a @click="handleDetail(record)" :disabled="dingdan.auditFlag !== '0'">详情</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"
                                    :disabled="dingdan.auditFlag !== '0'">
                                    <a>删除</a>
                                </a-popconfirm>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </span>
            </a-table>
        </div>
        <AddRenYuanModal ref="modalForm" @ok="modalFormOk" :selectedRoom="selectedRoom" :dingdan="dingdan"
            :selectRoomList="selectRoomList" />
    </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AddRenYuanModal from './AddRenYuanModal'
import { deleteAction } from '@/api/manage'

export default {
    name: 'AddRenYuanList',
    mixins: [JeecgListMixin],
    components: { AddRenYuanModal },
    props: {
        dingdan: {
            type: Object,
            required: true,
        },
        selectedRoom: {
            type: Object,
            default: () => { }
        },
        selectRoomList: {
            type: Array,
            default: () => { }
        }
    },
    watch: {
        selectedRoom: {
            deep: true,
            immediate: true,
            handler(val) {
                this.queryParam.roomRegisterRoomId = val ? val.id : null
                this.loadData()
            }
        },
        dingdan: {
            deep: true,
            immediate: true,
            handler(val) {
                this.queryParam.roomRegisterCode = val ? val.roomRegisterCode : null
                this.loadData()
            }
        }
    },
    data() {
        return {
            queryParam: {
                roomRegisterCode: this.dingdan.roomRegisterCode
            },
            isorter: {
                column: 'accountCode',
                order: 'asc',
            },
            url: {
                list: '/room/roomGuestRoom/list',
                delete: "/room/roomGuestRoom/delete",
            },

        }
    },
    computed: {
        columns() {
            return [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 40,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '标识',
                    align: "center",
                    dataIndex: 'accountCode',
                },
                {
                    title: '姓名',
                    align: "center",
                    dataIndex: 'guestName',
                },
                {
                    title: '证件类型',
                    align: "center",
                    dataIndex: 'idType',
                },
                {
                    title: '证件编号',
                    align: "center",
                    dataIndex: 'idCode'
                },
                {
                    title: '性别',
                    align: "center",
                    dataIndex: 'sex'
                },
                {
                    title: '联系电话',
                    align: "center",
                    dataIndex: 'phone'
                },
                {
                    title: '出生日期',
                    align: "center",
                    dataIndex: 'birthday'
                },
                {
                    title: '民族',
                    align: "center",
                    dataIndex: 'nation'
                },
                {
                    title: '国籍',
                    align: "center",
                    dataIndex: 'nationality'
                },
                {
                    title: '籍贯',
                    align: "center",
                    dataIndex: 'nativePlace'
                },
                {
                    title: '证件地址',
                    align: "center",
                    dataIndex: 'idAddress'
                },
                {
                    title: '工作单位',
                    align: "center",
                    dataIndex: 'company'
                },
                {
                    title: '账户状态',
                    align: "center",
                    dataIndex: 'accountStatus'
                },
                {
                    title: '账户类型',
                    align: "center",
                    dataIndex: 'accountType_dictText'
                },
                {
                    title: '已分配房间',
                    align: "center",
                    dataIndex: 'roomCode'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: { customRender: 'action' }
                }
            ]
        },
    },
    methods: {
        handleAdd: function () {
            if (this.selectedRoom) {
                this.$refs.modalForm.add();
                this.$refs.modalForm.title = "为 " + this.selectedRoom.roomCode + " 房间新增人员";
                this.$refs.modalForm.disableSubmit = false;
            } else {
                this.$refs.modalForm.add();
                this.$refs.modalForm.title = "为 房间新增人员";
                this.$refs.modalForm.disableSubmit = false;
            }
        },
        handleEdit: function (record) {
            if (this.selectedRoom) {
                this.$refs.modalForm.edit(record);
                this.$refs.modalForm.title = "为 " + this.selectedRoom.roomCode + " 房间编辑人员";
                this.$refs.modalForm.disableSubmit = false;
            } else {
                this.$refs.modalForm.edit(record);
                this.$refs.modalForm.title = "为 房间编辑人员";
                this.$refs.modalForm.disableSubmit = false;
            }
        },
        handleDelete: function (id) {
            if (!this.url.delete) {
                this.$message.error("请设置url.delete属性!")
                return
            }
            var that = this;
            deleteAction(that.url.delete, { id: id }).then((res) => {
                if (res.success) {
                    //重新计算分页问题
                    that.reCalculatePage(1)
                    that.$message.success(res.message);
                    that.loadData();
                } else {
                    that.$message.warning(res.message);
                }
            });
        },
    }
}
</script>